<template>
    <div :ref="id" class="container"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    props: {
        id: String,
        data: String|Number
    },
    data() {
        return {
            chart: null,
        }
    },
    watch: {
        data: {
            handler() {
                this.$nextTick(() => {
                    this.initChart()
                })
            },
            immediate: true,

        }
    },
    beforeDestroy() {
        window.removeEventListener('resize', () => this.resize(), false);
        if (this.chart) {
            this.chart.dispose();
        }
    },

    methods: {

        initChart() {
            let option = {
                series: [
                    {
                        type: 'gauge',
                        center: ['55%', "57%"],
                        radius: '90%',
                        axisLine: {
                            lineStyle: {
                                width: 10,
                                color: [[1, {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 1,  
                                    y2: 0,
                                    colorStops: [{
                                        offset: 1, color: '#F7625E'
                                    },{
                                        offset: 0.5, color: '#FFB34A'
                                    },{
                                        offset: 0, color: '#00EFFF'
                                    }]
                                }]]
                            },
                        },
                        splitLine: {show: false},
                        axisLabel: {show: false},
                        axisTick: {show: false},
                        pointer: {
                            icon: 'triangle',
                            width: 10,
                            itemStyle: {
                                color: '#00FFA8'
                            },
                            length: 18,
                            offsetCenter: [0, '-60%']
                        },
                        detail: {
                            color: '#FFF',
                            formatter: function(value) {
                                return value + "%"
                            },
                            offsetCenter: [0, 0]
                        },
                        title: {
                            color: "#FFF",
                            offsetCenter: [0, '80%'],
                            fontSize: 16

                        },
                        data: [{value: this.data, name: '影视人才占比'}]

                    },
                    {
                        type: 'gauge',
                        center: ['55%', "57%"],
                        radius: '115%',
                        axisLine: {
                            lineStyle: {
                                color: [[1, '#BBEDFF']],
                                width: 2,
                                opacity: 0.7
                            },
                            
                        },
                        axisLabel: {show: false},
                        data: [{value: this.data}],
                        pointer: {show :false},
                        detail: {show :false},
                        axisTick: {
                            length: 2,
                            distance: 3,
                            lineStyle: {
                                color: '#00BAFF',
                                opacity: 0.7
                            },
                            
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#00EFFF',
                                opacity: 0.7
                            },  
                        },
                        pointer: {
                            icon: 'image://',
                            itemStyle: {
                                color: '#00FFA8'
                            },
                            width: 50,
                            length: 15,
                            offsetCenter: [0, '-35%']
                        },
                        data: [{value: this.data}]
                    },
                    {
                        type: 'gauge',
                        center: ['55%', "57%"],
                        radius: '72%',
                        axisLine: {
                            lineStyle: {
                                color: [[1, '#00EFFF']],
                                width: 20,
                                opacity: 0.12
                            },
                            
                        },
                        axisLabel: {show: false},
                        pointer: {show :false},
                        detail: {show :false},
                        splitLine: {show: false},
                        axisLabel: {show: false},
                        axisTick: {show: false},
                        startAngle: 360,
                        endAngle: 0,

                    }
                ]
            }
            this.chart = echarts.init(this.$refs[this.id]);
            this.chart.setOption(option);
            window.addEventListener('resize', () => this.resize(), false)
        },
        resize() {
            if (this.chart) {
                this.chart.resize();
            }
        }
    }
}
</script>
<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
}
</style>